<template>
  <div id="caiSheQuXianTu" style="height: 350px"></div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts'
  import { getHslArray } from '@/utils'

  const props = defineProps({
    data: {
      type: Array,
      default: () => []
    }
  })

  const myChart = ref()
  const colorList = ref<any>([])
  const seriesArr = ref<any>([])
  const canShuStr = ref()
  const xZhouArr = ref<any>([])

  watch(
    () => props.data,
    (newValue: any) => {
      if (newValue.length == 0) {
        canShuStr.value = ''
        xZhouArr.value = []
        return
      }
      colorList.value = getHslArray(newValue.length)
      canShuStr.value = newValue[0].title
      xZhouArr.value = newValue[0].xZhouArr
      seriesArr.value = newValue.map((val, index) => {
        return {
          name: val.name,
          type: 'line',
          data: val.valueArr,
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 5,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color:
                  colorList.value[index].substring(0, colorList.value[index].lastIndexOf(',')) +
                  ',' +
                  100 +
                  ')'
              },
              {
                offset: 1,
                color: colorList.value[index]
              }
            ]),
            shadowColor: colorList.value[index].replace('1)', 0.3 + ')'),
            shadowBlur: 10,
            shadowOffsetY: 20
          },
          itemStyle: {
            normal: {
              color: colorList.value[index],
              borderColor: colorList.value[index]
            }
          }
        }
      })
      handleSetVisitChart()
    },
    { deep: true, immediate: true }
  )

  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('caiSheQuXianTu'))
    let option = {
      backgroundColor: '#fff',
      title: {
        text: canShuStr.value,
        textStyle: {
          fontSize: 16,
          fontWeight: 400
        },
        left: 'center',
        top: '1%'
      },
      legend: {
        icon: 'circle',
        top: '1%',
        right: '1%',
        itemWidth: 6,
        itemGap: 20,
        textStyle: {
          color: '#556677'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          label: {
            show: true,
            backgroundColor: '#fff',
            color: '#556677',
            borderColor: 'rgba(0,0,0,0)',
            shadowColor: 'rgba(0,0,0,0)',
            shadowOffsetY: 0
          },
          lineStyle: {
            width: 0
          }
        },
        backgroundColor: '#fff',
        textStyle: {
          color: '#5c6c7c'
        },
        padding: [10, 10],
        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
      },
      grid: {
        top: '10%',
        left: 70,
        right: 40,
        bottom: 40
      },
      xAxis: [
        {
          type: 'category',
          data: xZhouArr.value,
          axisLine: {
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#556677'
            },
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 15
          },
          axisPointer: {
            label: {
              // padding: [11, 5, 7],
              padding: [0, 0, 10, 0],
              /*
                    除了padding[0]建议必须是0之外，其他三项可随意设置
                    和CSSpadding相同，[上，右，下，左
                    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
                    padding[2]的10:
                    10 = 文字距下边线的距离 + 下边线的宽度
                    如：UI图中文字距下边线距离为7 下边线宽度为2
                    则padding: [0, 0, 9, 0]
                  */
              // 这里的margin和axisLabel的margin要一致!
              margin: 15,
              // 移入时的字体大小
              fontSize: 12,
              backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#fff' // 0% 处的颜色
                  },
                  {
                    // offset: 0.9,
                    offset: 0.86,
                    // 0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
                    color: '#fff' // 0% 处的颜色
                  },
                  {
                    offset: 0.86,
                    color: '#33c0cd' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#33c0cd' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          boundaryGap: false
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false,
            left: 100
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCE2E8'
            }
          },
          axisLabel: {
            textStyle: {
              left: 100,
              color: '#556677'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              width: 1,
              color: ['#E3E3E3'] // 分割线的颜色
              // color: ['#5d5d5d'] //分割线的颜色
            }
          }
        }
      ],
      series: seriesArr.value
    }
    myChart.value.clear()
    myChart.value.setOption(option)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }
</script>
